﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Accordion - Events</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/jquery.integralui.accordion.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-blue.css" />
    <script type="text/javascript" src="../../../external/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../../external/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="../../../external/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.integralui.widget.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.integralui.accordion.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var $bar = $('#accordion').accordion();
            
            $eventLog = $("#eventLog");
            
            $bar
                .on({
                    "aftercollapse": function(e){
                        $eventLog.append("<li><span style='color:#c60d0d'>aftercollapse</span> event was fired for group: <i>" + e.object.text + "</i></li>"); 
                    },
                    "afterexpand": function(e){
                        $eventLog.append("<li><span style='color:#c60d0d'>afterexpand</span> event was fired for group: <i>" + e.object.text + "</i></li>"); 
                    },
                    "afterselect": function(e){
                        $eventLog.append("<li><span style='color:#c60d0d'>afterselect</span> event was fired for group: <i>" + e.object.text + "</i></li>"); 
                    },
                    "beforecollapse": function(e){
                       $eventLog.append("<li><span style='color:#c60d0d'>beforecollapse</span> event was fired for group: <i>" + e.object.text + "</i></li>"); 
                    },
                    "beforeexpand": function(e){
                       $eventLog.append("<li><span style='color:#c60d0d'>beforeexpand</span> event was fired for group: <i>" + e.object.text + "</i></li>"); 
                    },
                    "beforeselect": function(e){
                       $eventLog.append("<li><span style='color:#c60d0d'>beforeselect</span> event was fired for group: <i>" + e.object.text + "</i></li>"); 
                    },
                    "clear": function(e){
                       $eventLog.append("<li><span style='color:#c60d0d'>clear</span> event was fired all groups are removed</li>"); 
                    },
                    "groupadding": function(e){
                       $eventLog.append("<li><span style='color:#c60d0d'>groupadding</span> event was fired before <i>" + e.object.text + "</i> is added</li>"); 
                    },
                    "groupadded": function(e){
                        $eventLog.append("<li><span style='color:#c60d0d'>groupadded</span> event was fired after <i>" + e.object.text + "</i> is added</li>"); 
                    },
                    "groupclick": function(e){
                        $eventLog.append("<li><span style='color:#c60d0d'>groupclick</span> event was fired when <i>" + e.object.text + "</i> was clicked</li>"); 
                    },
                    "grouphover": function(e){
                        $eventLog.append("<li><span style='color:#c60d0d'>grouphover</span> event was fired when the mouse cursor hovers over <i>" + e.object.text + "</i> space</li>"); 
                    },
                    "groupremoving": function(e){
                       $eventLog.append("<li><span style='color:#c60d0d'>groupremoving</span> event was fired before <i>" + e.object.text + "</i> is removed</li>"); 
                    },
                    "groupremoved": function(e){
                        $eventLog.append("<li><span style='color:#c60d0d'>groupremoved</span> event was fired after <i>" + e.object.text + "</i> is removed</li>"); 
                    },
                    "grouprightclick": function(e){
                        $eventLog.append("<li><span style='color:#c60d0d'>grouprightclick</span> event was fired when <i>" + e.object.text + "</i> was clicked using right mouse button</li>"); 
                    },
                    "selectionchanged": function(e){
                       $eventLog.append("<li><span style='color:#c60d0d'>selectionchanged</span> event was fired when selection changes</li>"); 
                    }
                });
          
            $('#clear').click(function(e){
               $eventLog.empty();
           });
        });
    </script>
</head>
<body oncontextmenu="return false;">
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content">
        <div class="feature">
	        <h2 class="feature-title">Accordion / Events</h2>
	        <div class="feature-content" style="width:750px">
                <div id="accordion" class="widget">
                    <h3>Health</h3>
                    <div></div>
                    <h3>Literature</h3>
                    <div></div>
                    <h3>Science</h3>
                    <div></div>
                </div>
                <div class="control-panel" style="width:300px;">
                    <div style="background: white; border: thin solid gray; border-radius:3px; width: 350px; height: 400px">
                        <form name="frm">
                            <button type="button" id="clear" style="float:right;margin:3px 12px; width:50px">Clear</button>
                            <p style="margin:0 10px; padding: 3px; border-bottom: thin solid #c5c5c5">Event log:</p>
                        </form>
                        <ul id="eventLog">
                        </ul>
                    </div>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>This sample presents most of events that are fired from Accordion widget. Depending on action, a specific event is fired, which you can handle by simple creating an event handler. Here is list of events that are supported:</p>
                     <ul class="feature-points">
                        <li><span style="color:#c60d0d">aftercollapse</span> - Occurs after an group is collapsed</li>
                        <li><span style="color:#c60d0d">afterexpand</span> - Occurs after an group is expanded</li>
                        <li><span style="color:#c60d0d">afterselect</span> - Occurs after an group is selected</li>
                        <li><span style="color:#c60d0d">beforecollapse</span> - Occurs before an group is collapsed</li>
                        <li><span style="color:#c60d0d">beforeexpand</span> - Occurs before an group is expanded</li>
                        <li><span style="color:#c60d0d">beforeselect</span> - Occurs before an group is selected</li>
                        <li><span style="color:#c60d0d">clear</span> - Occurs when all groups are removed</li>
                        <li><span style="color:#c60d0d">groupadding</span> - Occurs before a new group is added</li>
                        <li><span style="color:#c60d0d">groupadded</span> - Occurs after a new group is added</li>
                        <li><span style="color:#c60d0d">groupclick</span> - Occurs when group is clicked</li>
                        <li><span style="color:#c60d0d">grouphover</span> - Occurs when the mouse cursor hovers over group header</li>
                        <li><span style="color:#c60d0d">groupremoving</span> - Occurs before group is removed</li>
                        <li><span style="color:#c60d0d">groupremoved</span> - Occurs after group is removed</li>
                        <li><span style="color:#c60d0d">grouprightclick</span> - Occurs when group is clicked using right mouse button</li>
                        <li><span style="color:#c60d0d">selectionchanged</span> - Occurs when selection changes</li>
                    </ul>
                    <p><span class="initial-space"></span>Depending on some conditions, when handling some of above events you can prevent the default action to proceed, by canceling the operation.</p>
                    <p><span class="initial-space"></span>In this sample event log will not register add/remove events, because this kind of operation is not demonstrated here.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
